<template>
	<view class="SelectedPremiumProductsData">
		<div class="title">火爆单品</div>
		<!-- 展示房间床数据 -->
		<view class="bed">
			<template v-for="(item ,index) in bedData">
				<template v-if="(index+1)%2===0">
					<image :src="item" mode="" class="bedImg" style="margin-left: 24rpx;" @click="showPurchase">
					</image>
				</template>
				<template v-else>
					<image :src="item" mode="" class="bedImg" @click="showPurchase"></image>
				</template>
			</template>
		</view>
		<!-- 展示购买弹窗 -->
		<template v-if="showPurchasePop">
			<pucharse-pop @closePucharsePop="shutupPucharse"></pucharse-pop>
		</template>
	</view>
</template>

<script>
	import pucharsePop from '../common/pucharsePop/pucharsePop.vue';
	export default {
		name: "SelectedPremiumProducts",
		data() {
			return {
				// bedData: []
				bedData: [
					"/static/images/SelectedPremiumProductsPage/bed1Replace.png",
					"/static/images/SelectedPremiumProductsPage/bed2Replace.png"
				],
				showPurchasePop: false,

			};
		},
		components: {
			pucharsePop,
		},
		methods: {
			// 点击图片弹出购买弹窗
			showPurchase() {
				uni.hideTabBar()
				this.showPurchasePop = true;
				// console.log(this.showPucharsePop);
				console.log(this.showPurchasePop)
			},
			shutupPucharse() {
				this.showPurchasePop = false;
				uni.showTabBar()
			}

		}

	}
</script>

<style lang="less">
	@import "../../static/commonStyleLess/grayBox.less";

	.SelectedPremiumProductsData {
		color: #222222;
		margin-top: 60rpx;
		font-family: 'PingFang SC';
		letter-spacing: -0.82rpx;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			margin-left: 30rpx;
		}

		.bed {
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			.bedImg {
				width: 336rpx;
				height: 336rpx;
				border-radius: 16rpx;

			}
		}
	}
</style>